<style lang="less" scoped>
.codeText {
  display: flex;
  border:none;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  ::v-deep .jsoneditor-vue {
    flex: 1 1 auto;
    height:100%;
    .jsoneditor {
      .jsoneditor-menu {
        a {
          display: none;
        }
      }
      .jsoneditor-outer {  
        height: calc(~"100% - 40px");
        margin: 0;
        padding:0;
      }
    }
  }
}
.viewModel {
  ::v-deep .jsoneditor-vue {
    .jsoneditor {
      .jsoneditor-menu {
        display: none;
      }
    }
  }
}
.wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding:1px 0px;
}
.title {
  font-size: 20px;
  font-weight: 10px;
}


</style>
<template>
    <div class=" wrapper">
      <span v-if="!!config.title" class="title">{{ config.title }}</span>
      <Divider v-if="!!config.title" style="margin: 6px"/>
      <Button :type="config.error?'error':'success'" :style="{width:width}" long :disabled="config.error||!code">
        {{ $i18n.locale === 'en' ? config.error?'error':'validated' : config.error?'错误':'已验证' }}
      </Button>
        <vue-json-editor ref="editor" v-model="cloneValue" :show-btns="false" :mode="config.readonly==true?'view':'code'" :lang="$i18n.locale"
                         :class="['codeText',{'viewModel':config.readonly==true}]"
                         @json-change="change"
                         @has-error="handleError"
        ></vue-json-editor>

    </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor';

export default {
  name:'JsonEditor',
    data() {
        return {
            error: false,
            cloneValue: {},
            width:'100%'
        }
    },
    props: {
        code: {
            default: () => {
              return {}
            }
        },
        config:{
            default:()=>{
                return {
                  error:false,
                  title:'',
                  readonly:true
                }
            }
        },
    },
    components: {
      vueJsonEditor
    },
    computed: {},
    mounted() {
      let _this=this;
      this.cloneValue = this.code;
      this.$nextTick(() => {
          this.$emit('load', this);
      })
      if(!!this.$refs.pop){
        let observer = new ResizeObserver(entries => {
          entries[0].target.children[0].style.width='100%'
        })
        this.$nextTick(() => {
          observer.observe(_this.$refs.pop.$el);
        })
      }
    },
    watch: {
        code: {
          handler(val) {
            this.cloneValue = this.code;;
          },
          deep:true  
        }
    },
    methods: {
        refresh() {
            this.$forceUpdate();
        },
        change(code){
          this.config.error = false
          this.$emit('change',code)
          console.log(code)
        },
        handleError(err){
          this.config.error = true
          this.$emit('error',err)
          console.log(err)
        }
    }
}
</script>
    